<!--
 * @Author: maomao
 * @Date: 2021-04-06 10:02:46
 * @Description: 地址选择器组件
 * @FilePath: \his-dictionary-web\src\components\address-select.vue
-->
<template>
  <div>
    <DxBox direction="row" width="100%">
      <DxItem :ratio="0" base-size="30%">
        <DxSelectBox
          :data-source="provinceSource"
          v-model:value="address.province.code"
          display-expr="name"
          :styling-mode="stylingMode"
          :element-attr="boxAttributes"
          :search-enabled="true"
          value-expr="code"
          @value-changed="(value) => onValueChanged(value, 1)"
        />
      </DxItem>
      <DxItem :ratio="0" base-size="30%">
        <div v-show="citySource.length > 0">
          <DxSelectBox
            v-model:data-source="citySource"
            v-model:value="address.city.code"
            display-expr="name"
            :styling-mode="stylingMode"
            :element-attr="boxAttributes"
            :search-enabled="true"
            value-expr="code"
            @value-changed="(value) => onValueChanged(value, 2)"
          />
        </div>
      </DxItem>
      <DxItem :ratio="0" base-size="30%">
        <div v-show="areaSource.length > 0">
          <DxSelectBox
            :data-source="areaSource"
            display-expr="name"
            v-model:value="address.area.code"
            :styling-mode="stylingMode"
            :element-attr="boxAttributes"
            :search-enabled="true"
            value-expr="code"
            @value-changed="(value) => onValueChanged(value, 3)"
          />
        </div>
      </DxItem>
    </DxBox>
  </div>
</template>
<script lang='ts'>
import { DxBox, DxItem } from "devextreme-vue/box";
import { Inject, Options, Vue } from "vue-property-decorator/lib";
import DxSelectBox from "devextreme-vue/select-box";
import { ApiTool } from "@/api/api-tool";
// import { ApiExceptionShow } from "@/utils/api-exception-show";
// import { RegionClient } from "@/api/system";
import { AddressitemModel, AddressPickerModel } from "@/utils/address";
import { Tool } from "@/utils/tool";
import { Prop } from "vue-property-decorator";
import { watch } from "vue";

@Options({
  components: {
    DxBox,
    DxItem,
    DxSelectBox,
  },
  emits: ["change"],
})
export default class AddressPicker extends Vue {
  @Prop({ default: {} })
  value: AddressPickerModel;
  address: AddressPickerModel;
  @Inject()
  apiTool: ApiTool;
  provinceSource: AddressitemModel[] = [];
  citySource: AddressitemModel[] = [];
  areaSource: AddressitemModel[] = [];
  stylingMode = "outlined";
  boxAttributes = {
    class: "address-picker",
  };

  formData = {
    code: null,
    name: null,
    parentCode: "00",
  };
  created() {
    let value = Object.assign(
      {
        province: "",
        city: "",
        area: "",
      },
      this.value
    );
    this.address = value;
    this.$emit("change", value);
  }
  mounted() {
    let value = Object.assign({}, this.address);
    this.onGetAddressList("00");
    if (!Tool.isEmpty(value.province.code)) {
      this.onGetAddressList(value.province.code, 1);
    }
    if (!Tool.isEmpty(value.city.code)) {
      this.onGetAddressList(value.city.code, 2);
    }
  }
  onValueChanged(value, status: number) {
    if (value == undefined || value.value == undefined) return null;
    this.onGetAddressList(value.value, status);
  }

  onGetAddressList(code: string, status = 0) {
    let value = Object.assign({}, this.address);
    // this.apiTool.request().then(
    //   () => {
    //     let client = this.apiTool.createSystemeClient(RegionClient);
    //     client.lazyList(this.formData.code, this.formData.name, code).then(
    //       (model) => {
    //         if (model.code == 200) {
    //           switch (status) {
    //             case 0:
    //               if (model.data.length <= 0) {
    //                 return;
    //               }
    //               this.provinceSource = model.data;
    //               if (!Tool.isEmpty(value.province.code)) {
    //                 var provinceValue = model.data.find(T => T.code == value.province.code);
    //                 if (provinceValue == undefined) {
    //                   value.province = {
    //                     code: model.data[0].code,
    //                     name: model.data[0].name,
    //                   }
    //                 }
    //                 else {
    //                   value.province = {
    //                     code: provinceValue.code,
    //                     name: provinceValue.name,
    //                   }
    //                 }
    //               }
    //               else {
    //                 value.province = {
    //                   code: model.data[0].code,
    //                   name: model.data[0].name,
    //                 }
    //               }
    //               break;
    //             case 1:
    //               if (model.data.length <= 0) {
    //                 this.citySource = [];
    //                 this.areaSource = [];
    //                 value.city = { code: '', name: '' };
    //                 value.area = { code: '', name:'' };
    //               }
    //               else {
    //                 this.citySource = model.data;
    //                 if (!Tool.isEmpty(value.province.code)) {
    //                   var selectCityValue = model.data.find(T => T.code == value.city.code);
    //                   //this.selectCity = selectCityValue == undefined ? model.data[0] : selectCityValue;
    //                   if (selectCityValue == undefined) {
    //                     value.city = {
    //                       code: model.data[0].code,
    //                       name: model.data[0].name,
    //                     }
    //                   }
    //                   else {
    //                     value.city = {
    //                       code: selectCityValue.code,
    //                       name: selectCityValue.name,
    //                     }
    //                   }
    //                 }
    //                 else {
    //                   value.city = {
    //                     code: this.citySource[0].code,
    //                     name: this.citySource[0].name
    //                   };
    //                 }
    //               }
    //               break;
    //             case 2:
    //               if (model.data.length <= 0) {
    //                 this.areaSource = [];
    //                 value.area = { code: '', name: '' };
    //                 return;
    //               }
    //               this.areaSource = model.data;
    //               if (!Tool.isEmpty(value.city.code)) {
    //                 var selectAreaValue = model.data.find(T => T.code == value.area.code);
    //                 if (selectAreaValue == undefined) {
    //                   value.area = {
    //                     code: model.data[0].code,
    //                     name: model.data[0].name,
    //                   }
    //                 }
    //                 else {
    //                   value.area = {
    //                     code: selectAreaValue.code,
    //                     name: selectAreaValue.name,
    //                   }
    //                 }
    //               }
    //               else {
    //                 value.area = {
    //                   code: model.data[0].code,
    //                   name: model.data[0].name
    //                 };
    //               }
    //               break;
    //           }
    //           this.address = value;
    //           this.$emit("change", value);
    //         }
    //       },
    //       (error) => {
    //         ApiExceptionShow.showException(error, this);
    //       }
    //     );
    //   },
    //   (error) => {
    //     ApiExceptionShow.showException(error, this);
    //   }
    // );
  }
}
</script>
<style lang="scss" scoped>
.address-picker {
  margin-right: 30px;
}
</style>